<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue-demo-signIn&signUp</title>
</head>
<body>
    <div id="app">
        <section id="SignUpAndloginIn" v-if="!currentUser">
                <div>
                    <label><input type="radio" name="type"  v-model="actionType" value="signUp">注册</label>
                    <label> <input type="radio" name="type" v-model="actionType" value="login">登录</label>
                </div>              
                <div class="signUp" v-if="actionType=='signUp'">
                  <form @submit.prevent=signUp> 
                    <div class="formRow">
                        用户名<input type="text" v-model="formData.username" >       
                    </div> 
                    <div class="formRow">
                        密码<input type="password" v-model="formData.password">    
                    </div> 
                    <div class="formAction">
                        <input type="submit" value="注册">
                    </div>
                  </form>  
                </div> 
                <div class="login" v-if="actionType=='login'">
                    <form @submit.prevent=login>
                        <div class="formRow">
                            用户名<input type="text" v-model="formData.username">
                        </div>
                        <div class="formRow">
                            登录密码<input type="password" v-model="formData.password">
                        </div>
                        <div class="formAction">
                            <input type="submit" value="登入">
                        </div>
                    </form>
                </div>
        </section>
        <section id="todo" v-if="currentUser">
            <p><button @click='logout'>登出</button></p>
            <div class="newTask">
                <label for="">待办事项：</label>
                <input type="text" v-model="newToDo" @keypress.enter="addToDo">
            </div>
            <ol class="todos">
                <li v-for="todo in todoList">
                    <input type="checkbox" v-model="todo.done">{{todo.title}}
                    <span v-if="todo.done">已完成</span>
                    <span v-else>未完成</span>
                    <!--删除按钮-->
                    <button class="btn-del" @click="removeToDo(todo)">删除</button> 
                </li>
            </ol>
        </section> 
    </div>

    <script type="text/javascript" src="bundle.js"></script> 
</body>
</html>